import React from "react";
import {useNavigate, NavigateFunction, Outlet} from "react-router-dom";
import {TabBar} from "antd-mobile";
import {
    AppOutline,
    UserOutline,
} from 'antd-mobile-icons'


interface props {
    navigate: NavigateFunction;
}

interface Tab {
    key: string;
    title: string;
    icon?: any;
    badge?: any;
}

interface state {
    tabs: Tab[];
    selectKey: string;
}

class LoveNest extends React.Component<props, state> {
    constructor(props: props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/home',
                    title: '主页',
                    icon: <AppOutline />
                },
                {
                    key: '/my',
                    title: '我的',
                    icon: <UserOutline />
                }
            ],
            selectKey: '/home'
        };
    }

    changeSelectKey = (key: string) => {
        this.setState({
            selectKey: key
        });
        this.props.navigate('/loveNest' + key);
    };

    render() {
        return (
            <>
                <div className="w-full h-screen bg-gray-400 flex justify-center">
                    <div className="h-full w-full bg-white xs:w-4/12 sm:w-4/12 relative">
                        {/* 内容部分 */}
                        <Outlet/>
                        <TabBar
                            safeArea
                            className="absolute bottom-0 left-0 w-full bg-white border-t"
                            onChange={(key) => this.changeSelectKey(key)}
                        >
                            {this.state.tabs.map((item) => (
                                <TabBar.Item
                                    key={item.key}
                                    icon={item.icon}
                                    title={item.title}
                                    badge={item.badge}
                                />
                            ))}
                        </TabBar>
                    </div>
                </div>
            </>
        );
    }
}

// 高阶函数，用于将 navigate 注入到类组件中
function withRouter(Component: any) {
    return (props: any) => {
        let navigate = useNavigate();
        return <Component {...props} navigate={navigate} />;
    };
}

export default withRouter(LoveNest);
